import React,{useState} from 'react';
// Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。 Lodash 的模块化方法 非常适用于：
import * as _ from "lodash"
import './App.css';
import {observer} from "mobx-react"
import { action,observable,remove} from 'mobx'
import { act } from 'react-dom/test-utils';


// class MyChild {
//   childName: string = undefined;
//   childId: number = null;
//   childAge:any = null;
//   childSchool: string = undefined; 
// }
// class MyChild {
//   @observable childName: string = undefined;
//   @observable childId: number = null;
//   @observable childAge:any = null;
//   @observable childSchool: string = undefined; 
// }

 class MyChild {
  childName: string = undefined;
  childId: number = null;
  childAge:any = null;
  childSchool: string = undefined;
  
  @action.bound saveChildInfo(child,allChildren,store){
    // let child = props.model
  //   if(child.childId) {
  //     let childIndex = allChildren.findIndex((c)=>c.childId == child.childId)
  //     allChildren[childIndex] = child

  //  }else {
  //    console.log("store.child= ",store.child);
  //    console.log("store.children= ",store.childrens);

  //   child.childId = new Date().getTime()
  //    store.childrens.unshift(child)

  //  }
  //  store.child = {childName:null,childAge:null,childId:null,childSchool:null}

  }
}



// 注意1.这里的Apps组件要被MobX下的observer包装监听（同时这里的founction要改完const修饰情况）

// @observer
function Appss() {

  // const [child,setChild] = useState(new MyChild())
  // const [childList,setChildList] = useState([])

  const [store,] = useState(observable({
    childrens:[],
    child:{
      childName:undefined,
      childId:null,
      childAge:null,
      childSchool:undefined,
    }
  }))


  
  // 全局获得store监听下的book对象(这里取值可以，但是设置值的话，必须用store.xx，否则MobX无法监听到如xx的set方法就无法实现实时更新的效果)
  let child= store.child;
  let allChildren = store.childrens;

  return (
    <div className="App">
      <header className="App-header">
        <h1>MobX组件示例</h1>
        <div > 孩子总数:{allChildren.length}胎</div>
        孩子详情:
        <ul>
        {allChildren.map((item,index)=>{
          return <div>
            <li>
             孩子姓名：{item.childName} - 孩子年龄：{item.childAge} - 孩子学校：{item.childSchool} 
            </li>
            <button onClick={()=>{
              store.child = item;

            }}>编辑</button>
            <button onClick={()=>{
              (store.childrens as any).remove(item)
            }}>删除</button>
          </div>
        })}
        </ul>
        <div>
         姓名: <input key={1} type={"text"} value={child.childName || ""} onChange={(e)=>{
           console.log(e.target.value)
           store.child.childName = e.target.value;
         }}/>{child.childName}
        </div>
        <div>
         年龄: <input key={2} type={"text"} value={child.childAge || ""} onChange={(e) =>{
           store.child.childAge = e.target.value;
         }} />
         </div>
        <div>
         学校: <input key={3} type={"text"} value={child.childSchool || ""} onChange={(e) =>{
           store.child.childSchool = e.target.value;
          }} />
        </div>      
         <br></br>
         // 注意2.保存时的onClick事件外部要包装一层MobX下的action来监听整个事件过程
         <button onClick={action(()=>{
           if(child.childId) {
             let childIndex = allChildren.findIndex((c)=>c.childIndex = child.childId)
             store.childrens[childIndex] = child
           }else {
             child.childId = new Date().getTime
             store.childrens.unshift(child)
           }
           store.child = {childAge:null,childSchool:null,childId:null,childName:null}
         })}>保存</button>
        
      </header>
    </div>
  );
}

export default Appss;
function saveChildInf() {

  throw new Error('Function not implemented.');
}

